<template>
  <transition>
    <div class="purchasing-list">
      <section class="app-main">

        <div class="app-main-content">
          <!-- tab-container -->

          <div class="app-header">
          <span class="type-show">全部采购历史</span>
            <mt-button class="btn-filter" type="danger" @click="handleFilter">筛选<span class="iconfont icon-shaixuan"></span></mt-button>
            <mt-button class="btn-filter" type="primary" @click="handleAdd">新增<span class="iconfont icon-zengjia"></span></mt-button>
          </div>
          <div class="tab-body xunjia-list">
            <ul class="media-list"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="10" v-if="showNone==false">
              <li class="media-item" v-for="(item,index) in purchasingList" @click="handleDetails(item.poHeadId)">
                <!--<span class="item-label item-label-yewu" v-if="item.isAudit=='是'">业务审核</span>-->
                <span class="item-label item-label-money" v-if="item.isAccount=='是'">财务审核</span>
                <span class="media-img"><span class="iconfont icon-webicon05"></span></span>
                <dl class="media-content">
                  <dd class="media-title">
                    {{getSupplierName(item.supplierId)}}
                  </dd>
                  <dd class="media-number">单号：{{item.poNo}}</dd>
                  <dd class="media-number" style="padding: 2px 0">业务审核：{{item.isAudit}}</dd>
                  <dd class="media-date">日期：{{item.createDate}}</dd>
                  <dd class="media-price">
                    ￥<span class="price">{{item.costAmt}}</span>
                    <span class="count">x{{item.totalQty}}</span>
                  </dd>
                </dl>
              </li>
            </ul>

            <div class="line-scale-pulse-out" v-show="loading">
              <div class="loader-item"></div>
              <div class="loader-item"></div>
              <div class="loader-item"></div>
              <div class="loader-item"></div>
              <div class="loader-item"></div>
            </div>
            <div class="module-none" v-if="showNone">
              暂无采购历史！
            </div>
          </div>

        </div>

        <!--弹窗-列表筛选-->
        <mt-popup
          v-model="popupFilterShow"
          position="right" class="filter-popup">
          <ul class="filter-list">
            <li class="filter-item">
              <span class="addon">条件搜索</span>
            </li>
            <li class="filter-item filter-item-spe">
              <mt-field label="供应商" placeholder="请选择供应商" v-model="search.applyCustomName" readonly="readonly" @click.native="handleSelectSupplier"></mt-field>
            </li>
            <li class="filter-item filter-item-spe">
              <mt-field label="采购单号" placeholder="请输入采购单号" v-model="search.sn"></mt-field>
            </li>
            <li class="filter-item filter-item-spe filter-item-select">
              <mt-cell
                title="业务审核标志" class="mint-field">
                <select v-model="search.isAudit" class="select-operator">
                  <option value="">全部</option>
                  <option v-for="item in isAuditAttr" :value="item.id">{{item.name}}</option>
                </select>
              </mt-cell>
            </li>
            <li class="filter-item filter-item-spe filter-item-select">
              <mt-cell
                title="财务审核标志" class="mint-field">
                <select v-model="search.isAccount" class="select-operator">
                  <option value="">全部</option>
                  <option v-for="item in isAccountAttr" :value="item.id">{{item.name}}</option>
                </select>
              </mt-cell>
            </li>
          </ul>
          <div class="button-content">
            <div class="button-block-6">
              <mt-button type="default" @click="popupFilterShow=false">取消</mt-button>
            </div>
            <div class="button-block-6">
              <mt-button type="danger" @click="handleSure">确认</mt-button>
            </div>
          </div>
        </mt-popup>
        <!--弹窗-列表筛选-->

        <mt-popup
          v-model="popupSupplier"
          position="bottom" class="my-popup">


          <div class="search-content">
            <mt-field label="" placeholder="供应商名称" v-model="searchValueSupplier">
              <span class="iconfont icon-search"></span></mt-field>
          </div>
          <div class="media-list">
            <mt-cell v-for="item in dataSupplier" :title="item.bartererName" is-link @click.native="handleSureSupplier(item)">

            </mt-cell>
          </div>
        </mt-popup>
      </section>
    </div>
  </transition>
</template>

<script>
  import { Navbar, TabItem,TabContainer, TabContainerItem,Button,Indicator,Toast} from 'mint-ui';

  //  Vue.component(Header.name, Header);
  export default {
    data () {
      return {
        res: '',
        resCount: '',
        searchValueSupplier:'',
        popupSupplier:false,
        showNone: false,
        popupFilterShow:false,
        loading: false,
        loadTips: false,
        page: 1,
        pageSize: 10,
        purchasingList: [],
        supplierList: [],
        isAuditAttr:[
          {
            id:'0101',
            name:'是'
          },{
            id:'0102',
            name:'否'
          },
        ],
        isAccountAttr:[
          {
            id:'0101',
            name:'是'
          },{
            id:'0102',
            name:'否'
          },
        ],

        search:{
          isAudit:'',
          isAccount:'',
          sn:'',
          applyCustomName:'',
          supplierId:'',
        },
      }
    },
    computed:{
      /**联想搜索计算**/
      dataSupplier(){
        return this.supplierList.filter((d) => {
            if (d.bartererName.indexOf(this.searchValueSupplier) > -1) {
          return d;
        }
      })
      }
    },
    mounted(){
      Indicator.open({
        text: '加载中...',
        spinnerType: 'snake'
      });
      /** 获取供应商列表 **/
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','100');
      this.$axios({
        method: 'post',
        url:'gp/bu/supplier!getSupplierList.do',
        data:params
      }).then((res)=>{

        this.supplierList=res.data.rows
      console.log(1111)
      var params = new URLSearchParams();
      params.append('page',this.page);
      params.append('rows',this.pageSize);
      params.append('form.isAudit',this.search.isAudit);
      params.append('form.isAccount',this.search.isAccount);
      params.append('form.poNo',this.search.sn);
      params.append('form.supplierId',this.search.supplierId);
      this.$axios({
        method: 'post',
        url:'gp/bu/purchase!getPurchaseOrderHeadList.do',
        data:params
      }).then((res)=>{
        this.purchasingList = res.data.rows;
      this.total=res.data.total;
      if(this.purchasingList.length<=0){
        this.showNone=true;
      }else{
        this.showNone=false;
      }
      Indicator.close()
    });
    })



    },
    methods:{
      getSupplierName(id){

        var supplierName='';
        this.supplierList.forEach(function(item){
          console.log(item.supplierId,id)
          if(item.supplierId==id){
            supplierName=item.bartererName;
            return;
          }
        });

        return supplierName;
      },
      handleDetails(id){
        this.$router.push({path:'/purchasing-details',query: {id:id}})
      },
      loadMore() {
        if(this.total==0){
          return false;
        }
        if(this.purchasingList.length<this.total){
          this.loading = true;
          this.page++;
          var params = new URLSearchParams();
          params.append('page',this.page);
          params.append('rows',this.pageSize);
          params.append('form.isAudit',this.search.isAudit);
          params.append('form.isAccount',this.search.isAccount);
          params.append('form.poNo',this.search.sn);
          params.append('form.supplierId',this.search.supplierId);
          this.$axios({
            method: 'post',
            url:'gp/bu/purchase!getPurchaseOrderHeadList.do',
            data:params
          }).then((res)=> {
            for(var i=0;i<res.data.rows.length;i++){
            this.purchasingList.push(res.data.rows[i]);
          }
        });
          setTimeout(() => {
            this.loading = false;
        },1000);
        }else{
          this.loadTips=true;
        }

      },
      handleAdd(){
        this.$router.push({path:'/purchasing-management'})
      },
      handleFilter(){
        this.popupFilterShow=true
      },
      handleSelectSupplier(){
        this.popupSupplier=true
      },
      handleSureSupplier(item){
        this.search.applyCustomName=item.bartererName
        this.search.supplierId=item.supplierId
        this.popupSupplier=false

      },
      handleSure(){
        this.page=1;
        var params = new URLSearchParams();
        params.append('page',this.page);
        params.append('rows',this.pageSize);
        params.append('form.isAudit',this.search.isAudit);
        params.append('form.isAccount',this.search.isAccount);
        params.append('form.poNo',this.search.sn);
        params.append('form.supplierId',this.search.supplierId);
        this.$axios({
          method: 'post',
          url:'gp/bu/purchase!getPurchaseOrderHeadList.do',
          data:params
        }).then((res)=>{
//          if(res.data.result==true){
          console.log(res)
          Toast({
            message: '筛选成功',
            position: 'middle',
            duration:800
          });
          this.purchasingList = res.data.rows;
          this.total=res.data.total;
          if(this.purchasingList.length<=0){
            this.showNone=true;
          }else{
            this.showNone=false;
          }
        this.popupFilterShow=false
//        }else{
//          Toast({
//            message:res.data.message,
//            position: 'middle',
//            duration:800
//          });
//        }

      });
      }
    }
  }
</script>

<style>
  .purchasing-list{
    padding:54px 0 0;
  }
  .purchasing-list .module-none{
    padding:36px 0 0;
    font-size: 20px;
    text-align: center;
    color:#999;
  }
  .purchasing-list .app-header{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    font-size:15px;
    padding:8px 10px 6px;
    border-bottom:1px solid #ddd;
    overflow: hidden;

    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.05);
  }
  .purchasing-list .type-show{
    line-height: 40px;
  }
  .purchasing-list .btn-filter{
    /*background: none;*/
    /*color: #666;*/
    float: right;
    padding:8px 16px;
    height:34px;
    font-size: 13px;
    margin-left: 12px;
  }
  .purchasing-list .btn-filter .iconfont{
    position: relative;
    font-size: 14px;
    margin-left:3px;
  }
  .purchasing-list .media-list{
    background: #fff;
    padding:0 0 24px;
  }
  .purchasing-list .media-item{
    position: relative;
    display: flex;
  }
  .purchasing-list .media-item .item-label{
    background: #fff;
    position: absolute;
    top:30px;
    right:6px;
    display: inline-block;
    padding:3px 8px;
    border: 1px dashed #c34853;
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
    color: #c34853;
    z-index: 1;
    transform: rotate(-20deg);

  }
  .purchasing-list .media-item .item-label.item-label-yewu{
    right:86px;
  }
  .purchasing-list .media-item:last-child .media-content{
    border-bottom:none;
  }
  .purchasing-list .media-img{
    display: flex;
    width: 24%;
    justify-content: center;
    align-items: center;
  }
  .purchasing-list .media-img .iconfont {
    color: #c34853; font-size: 32px;
  }
  .purchasing-list .media-content{
    position: relative;
    padding: 12px 16px 12px 0;
    width:76%;
    margin: 0;
    border-bottom:1px solid #eee;
  }
  .purchasing-list .media-content dd{
    margin: 0;
    display: flex;
  }
  .purchasing-list .media-content .addon{
    width:72px;
  }
  .purchasing-list .media-content .content{
    width:80%;
  }
  .purchasing-list .media-content .media-title{
    font-size: 16px;
    color: #000;
    margin:0 0 6px;

  }
  .purchasing-list .media-content .media-number{
    font-size: 13px;
    color: #999;
  }
  .purchasing-list .media-content .media-date{
    margin:0 0 18px;
    font-size: 13px;
    color: #999;
  }
  .purchasing-list .media-content .media-price{
    position: relative;
    font-size: 17px;
    color: red;
    line-height: 20px;

  }
  .purchasing-list .media-content .media-price .count{
    position: absolute;
    top: 0;
    font-size: 17px;
    right: 0;
    color: #333;
  }
  .purchasing-list .filter-popup{
    height: 100%;
    width:80%;
    font-size: 14px;
  }
  .purchasing-list .filter-popup .button-content{
    padding:24px 10px 0;
    text-align: center;
    font-size: 0;
  }
  .purchasing-list .filter-popup .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .purchasing-list .filter-popup .button-content .mint-button{
    display: inline-block !important;
    width: 100%;
    font-size: 15px;
  }
  .purchasing-list .filter-list .addon{
    display: block;
    padding:12px 12px 0;
    /*border-bottom:1px solid #ddd;*/
  }
  .purchasing-list .filter-list .addon:before{
    background:#007EE5;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:4px;
    height:16px;
    content: '';
    margin-right:5px;
  }
  .purchasing-list .filter-item-spe .mint-cell-value{
    min-height:36px;
    padding:4px 8px;
    border:1px solid #ddd;
    border-radius:6px
  }
  .purchasing-list .filter-item-spe{
    border-bottom:none
  }
  .purchasing-list .filter-item-spe .mint-cell-wrapper{
    background:none;
    font-size: 14px;
  }
  .purchasing-list .filter-item-spe .mint-cell:last-child{
    background:none;
  }
  .purchasing-list .filter-item-select .mint-cell-value{
    padding:0 8px;
  }
  .purchasing-list .filter-item-select .select-operator{
    width: 100%;
    min-height:32px;
    border:none;
    outline:none;
  }
  .purchasing-list .my-popup{
    width: 100%;
    height:70%;
    padding: 58px 0 0;
  }
  .purchasing-list .search-content{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: auto;
    height: 60px;
    padding:12px 12px 12px 16px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
  }
  .purchasing-list .search-content .action-ruku{
    position: absolute;
    top: 13px;
    right: 12px;
    font-size: 13px;
    height: 34px;
  }
  .purchasing-list .search-content .mint-cell-wrapper{
    padding:2px 10px;
  }
  .purchasing-list .search-content .mint-cell{
    border: 1px solid #ddd;
    border-radius:20px;
    padding:0 6px;
    min-height: inherit;
  }
  .purchasing-list .search-content .mint-cell .mint-field-core{
    height: 30px;
    font-size: 14px;
  }
  .purchasing-list .search-content  .icon-search{
    padding-left: 12px;
    font-size: 20px;

  }
</style>
